<template>
  <div class="chart">

    <!--头部-->
    <div class="top">
      <!--查询条件-->
      <div class="left">

      </div>

      <!--新增轮播图-->
      <div class="add">
        <Button type="success" size="default" @click="addChart"> 新增轮播图</Button>
      </div>
    </div>

    <!--主体-->
    <div class="body">
      <Table
        border
        :loading="loadingFlag"
        show-header
        size="small"
        draggable
        :columns="columns"
        :data="chartList"
        @on-drag-drop="showOrder">

        <!--轮播图-->
        <template slot-scope="{ row, index }" slot="chartPic">
          <img class="chartUrl" :src="row.chartUrl" @click="openUrl(row.chartUrl)">
        </template>

        <!--跳转url-->
        <template slot-scope="{ row, index }" slot="webUrl">
          <span class="allPanel" @click="openUrl(row.webUrl)">{{row.webUrl}}</span>
        </template>

        <!--操作-->
        <template slot-scope="{ row, index }" slot="handle">
          <Button size="small" type="info" @click="updateChart(row)">编辑</Button>
        </template>

        <!--状态-->
        <template slot-scope="{ row, index }" slot="status">
          <span>
            <Button size="small" type="success" v-if="row.status == 1" @click="changeStatus(row, index)">在用</Button>
            <Button size="small" type="error" v-if="row.status == 0" @click="changeStatus(row, index)">失效</Button>
          </span>
        </template>

        <!--删除-->
        <template slot-scope="{ row, index }" slot="del">
          <Button size="small" type="error" @click="delChart(row)">删除</Button>
        </template>
      </Table>
    </div>


    <!--修改轮播图状态-->
    <Modal
      v-model="updateStatusPanel"
      title="修改轮播图状态"
      @on-ok="okUpdateStatus">

      <div v-if="tmpObj.status==0">
        确定
        <span class="modal-warning"> 上线 </span>
        该轮播图吗？
      </div>
      <div v-if="tmpObj.status==1">
        确定
        <span class="modal-warning"> 下线 </span>
        该轮播图吗？
      </div>
    </Modal>

    <!--删除轮播图-->
    <Modal
      v-model="delTipPanel"
      title="删除轮播图"
      @on-ok="okDel">
      <p>
        确定删除该轮播图吗 ?
        <span class="modal-warning">【不可恢复，谨慎删除】</span>
      </p>
    </Modal>

  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        //加载中
        loadingFlag: true,
        // 表格数据
        columns: [
          {
            title: "序号",
            // key: 'id',
            type: 'index',
            //可拖拽
            resizable: true,
            align: "center",
            width: 100
          },
          {
            title: "轮播图",
            slot: 'chartPic',
            key: 'chartPic',
            resizable: true,
            align: "center",
            width: 180
          },
          {
            title: "跳转URL",
            slot: 'webUrl',
            key: 'webUrl',
            resizable: true,
            align: "left",
          },
          {
            title: "编辑",
            slot: "handle",
            key: 'handle',
            resizable: true,
            align: "center",
            width: 120
          },
          {
            title: "状态",
            slot: "status",
            key: 'status',
            resizable: true,
            align: "center",
            width: 120
          },
          {
            title: "删除",
            slot: 'del',
            //可拖拽
            resizable: true,
            align: "center",
            width: 120
          }
        ],
        //轮播图列表
        chartList: [],
        //修改状态
        updateStatusPanel: false,
        //删除提示
        delTipPanel: false,
        //临时对象
        tmpObj: {
          chartId: "",
          chartUrl: "",
          webUrl: "",
          status: "",
          showOrder: "",
        }
      }
    },
    methods: {
      //新增轮播图
      addChart: function () {
        this.$router.push("/addChart");
      },
      //排序
      showOrder: function (from, to) {
        let fromObj = this.chartList[from];
        let toObj = this.chartList[to];

        this.$set(this.chartList, from, toObj)
        this.$set(this.chartList, to, fromObj)


        let fromShowOrder = fromObj.showOrder;
        let toShowOrder = toObj.showOrder;

        fromObj.showOrder = toShowOrder
        toObj.showOrder = fromShowOrder
        let array = new Array();
        array.push(fromObj)
        array.push(toObj)
        this.axios.put(`/chart/chart/charts`, array)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "排序成功"
              })
              //重新请求
              this.init()
            }
          })
      },
      //新窗口打开 图片 网站
      openUrl: function (url) {
        window.open(url, "_blank");
      },
      //改变状态
      changeStatus: function (row, index) {
        this.updateStatusPanel = true
        this.tmpObj = row
      },
      //改变状态
      okUpdateStatus: function () {
        let from = this.tmpObj.status
        let to;
        if (from == 1) {
          to = 0
        } else if (from == 0) {
          to = 1
        }
        let data = {
          status: to
        }
        this.axios.put(`/chart/chart/chart/${this.tmpObj.chartId}`, data)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "修改成功",
              })
              //重新请求
              this.init()
            }
          })
      },
      //删除
      delChart: function (row) {
        this.delTipPanel = true
        this.tmpObj = row
      },
      //删除
      okDel: function () {
        let chartId = this.tmpObj.chartId
        this.axios.delete(`/chart/chart/chart/${chartId}`)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "删除成功",
              })
              //重新请求
              this.init()
            }
          })
      },
      //修改轮播图
      updateChart: function (row) {
        this.tmpObj = row
        //跳转
        this.$router.push({
          path: "updateChart",
          name: "UpdateChart",
          query: {
            cid: this.tmpObj.chartId
          }
        });
      },
      //请求轮播图列表
      init: function () {
        //请求列表
        this.axios.get(`/chart/chart/chartList`)
          .then((resp) => {
            if (resp.data.flag) {
              this.chartList = resp.data.data
              this.loadingFlag = false
            }
          })
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style scoped>
  .chart {
  }

  .chart .top {
    overflow: hidden;
    margin: 20px auto 15px;
  }

  /*查询条件*/
  .chart .top .left {
    float: left;
  }

  /*轮播图预览*/
  .chartUrl {
    display: inline-block;
    width: 100px;
    height: 50px;
    margin-top: 5px;
  }

  /*新增轮播图*/
  .chart .top .add {
    float: right;
    margin-right: 10px;
  }

  .modal-warning {
    display: inline-block;
    margin: 0px 5px;
    color: #FF0000
  }

  /*URL占满单元格*/
  .allPanel{
    display: inline-block;
    width: 100%;
    height: 100%;
  }
</style>
